<template>
  <div class="filter-wrap">
    <el-form
      :ref="formName"
      :model="value"
      :label-width="`${filterConfig.formLabelWidth || '100px'}`"
      size="small"
    >
      <el-row>
        <el-col
          v-for="filterItem in filterConfig.items"
          :key="filterItem.prop"
          :span="filterItem.span || 8"
          v-bind="layout"
        >
          <el-form-item
            :label="filterItem.label"
            :prop="filterItem.prop"
            v-bind="filterItem"
          >
            <el-date-picker
              v-if="filterItem.type === FILTER_TYPE_DATE_PICK"
              v-model="value[filterItem.prop]"
              type="date"
              :placeholder="filterItem.placeholder"
              :value-format="filterItem.format"
              :format="filterItem.format"
              style="width: 100%"
            />
            <el-date-picker
              v-else-if="filterItem.type === FILTER_TYPE_DATE_RANGE"
              v-model="value[filterItem.prop]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"
            />
            <template v-else-if="filterItem.type === FILTER_TYPE_MULTI_SELECT">
              <el-select
                v-for="(selectItem, idx) in filterItem.list"
                :key="idx"
                v-model="value[filterItem.prop][selectItem.prop]"
                :placeholder="selectItem.placeholder"
                style="width: 50%"
              >
                <el-option
                  v-for="optionItem in getOptions(selectItem.options)"
                  :key="optionItem[selectItem.valueKey || 'value']"
                  :value="optionItem[selectItem.valueKey || 'value']"
                  :label="optionItem[selectItem.labelKey || 'label']"
                />
              </el-select>
            </template>
            <el-select
              v-else-if="filterItem.type === FILTER_TYPE_SELECT"
              v-model="value[filterItem.prop]"
              :placeholder="filterItem.placeholder"
              :clearable="filterItem.clearable"
              :filterable="filterItem.filterable"
              :multiple="filterItem.multiple"
              :multiple-limit="filterItem.multipleLimit"
              style="width: 100%"
            >
              <el-option
                v-for="optionItem in getOptions(filterItem.options)"
                :key="optionItem[filterItem.valueKey || 'value']"
                :value="optionItem[filterItem.valueKey || 'value']"
                :label="optionItem[filterItem.labelKey || 'label']"
              />
            </el-select>
            <el-input
              v-else
              v-model.trim="value[filterItem.prop]"
              :placeholder="filterItem.placeholder"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="filterConfig.singleLine ? 24 : 8">
          <div class="filter-btn-wrap" :class="{'single-line': filterConfig.singleLine}">
            <template v-if="filterConfig.buttons">
              <el-button
                v-for="(btnItem, index) in filterConfig.buttons"
                :key="index"
                :loading="loading"
                :type="btnItem.type"
                size="small"
                @click="btnItem.emit ? $emit(btnItem.emit) : resetForm()"
              >{{ btnItem.text }}</el-button>
            </template>
            <template v-else>
              <el-button type="primary" size="small" @click="$emit('query')">查询</el-button>
              <el-button size="small" @click="handleReset">重置</el-button>
            </template>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  FILTER_TYPE_INPUT,
  FILTER_TYPE_SELECT,
  FILTER_TYPE_DATE_PICK,
  FILTER_TYPE_DATE_RANGE,
  FILTER_TYPE_MULTI_SELECT
} from './Constant'
export default {
  name: 'CommonFilter',
  props: {
    filterConfig: {
      type: Object,
      required: true
    },
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      layout: { xs: 24, sm: 8, md: 8, lg: 8, xl: 8 },
      loading: false,
      FILTER_TYPE_INPUT,
      FILTER_TYPE_DATE_PICK,
      FILTER_TYPE_DATE_RANGE,
      FILTER_TYPE_SELECT,
      FILTER_TYPE_MULTI_SELECT
    }
  },
  computed: {
    formName() {
      return this.filterConfig.formName || 'filterForm'
    }
  },
  methods: {
    handleReset() {
      if (this.filterConfig.openReset) {
        this.$emit('reset')
      } else {
        this.resetForm()
      }
    },
    resetForm() {
      this.$refs[this.formName].resetFields()
    },
    getOptions(val) {
      return typeof val === 'function' ? val() : val || []
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-wrap {
  background: #fff;
  padding: 10px;
}
.filter-btn-wrap {
  width: 100%;
  display: flex;
  padding: 0 10px;
  &.single-line {
    justify-content: flex-end;
  }
}
</style>
